<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>

<head>
  <title>襄阳蓝芯智能化办公系统</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="${pageContext.request.contextPath}/static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/static/bootstrapvalidator/css/bootstrapValidator.css"
        rel="stylesheet">

  <script src="${pageContext.request.contextPath}/static/jquery/jquery-1.10.2.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/js/bootstrapValidator.js"></script>

</head>
<body>

<div class="panel panel-primary">
  <div class="panel-heading">
    <h4 class="panel-title">编辑移动申请单</h4>
  </div>

  <div class="panel-body">
    <form action="${pageContext.request.contextPath}/zc-assetmoveapply/editAssetmoveapply" id="myform" method="post"
          class="form-horizontal" role="form">
      <div class="col-md-12">
        <div class="form-group col-md-6">
          <label for="docNo" class="col-md-4 control-label">申请单号</label>
          <div class="col-md-8">
            <input type="hidden" id="oid" name="oid" value="${zcAssetmoveapply.oid}">
            <input type="hidden" name="createDate" value="${zcAssetmoveapply.createDate}">
            <input type="text" id="docNo" name="docNo" readonly="readonly"
                   class="form-control" placeholder="提交后自动生成" value="${zcAssetmoveapply.docNo}">
          </div>
        </div>

        <div class="form-group col-md-6">
          <label for="sex" class="col-md-4 control-label">申请人</label>
          <div class="col-md-8">
            <input type="hidden" id="proposer" name="proposer" value="${zcAssetmoveapply.proposer}">
            <div class="input-group">
              <input type="text" id="empName" name="empName"
                     readonly="readonly" class="form-control" placeholder="请选择申请人"
                     value="${empName}">
              <span class="input-group-btn">
                <button class="btn btn-info" type="button" data-toggle="modal"
                        data-target="#selectempModal">请选择</button>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-12">
        <div class="form-group col-md-6">
          <label for="flowid" class="col-md-4 control-label">移动审批流程</label>
          <div class="col-md-8">
            <select name="flowid" class="form-control" id="flowid">
              <option value="">--请选择--</option>
              <c:forEach items="${lcFlow}" var="flow">
                <option value="${flow.oid}" ${zcAssetmoveapply.flowid eq flow.oid ? 'selected' : ''}>${flow.flowName}</option>
              </c:forEach>
            </select>
          </div>
        </div>
        <div class="form-group col-md-6">
          <label for="reason" class="col-md-4 control-label">移动事由</label>
          <div class="col-md-8">
            <select id="reason" name="moveReason" class="form-control">
              <option value="">--请选择--</option>
              <c:forEach items="${jcBasicdatavalues}" var="jcs">
                <option value="${jcs.oid}" ${zcAssetmoveapply.moveReason eq jcs.oid ? 'selected' : ''}>${jcs.name}</option>
              </c:forEach>
            </select>
          </div>
        </div>
      </div>

      <div class="col-md-12">
        <div class="form-group col-md-12">
          <label for="remark" class="col-md-2 control-label">备注</label>
          <div class="col-md-10">
            <textarea class="form-control" id="remark" name="remark" rows="5"
                      placeholder="请输入备注">${zcAssetmoveapply.remark}</textarea>
          </div>
        </div>
      </div>

      <div class="col-md-12">
        <div class="form-group col-md-12">
          <hr>
        </div>
      </div>

      <div id="details">
        <c:if test="${not empty details}">
          <div class="col-md-12" id="detailsTitle">
            <div align="center">
              <h4><label class="text-primary">移动明细</label></h4><BR> <BR>
            </div>
          </div>

          <c:forEach items="${details}" var="detailMap" varStatus="status">
            <div>
              <div class="col-md-12">
                <div class="form-group col-md-5">
                  <label class="col-md-4 control-label">选择资产</label>
                  <div class="col-md-8">
                    <select name="assetId" class="form-control" onchange="selectAsset(this)">
                      <option value="">--请选择--</option>
                      <c:forEach items="${zcAssets}" var="zs">
                        <option value="${zs.oid}" ${detailMap.detail.assetId eq zs.oid ? 'selected' : ''}>${zs.assetName}</option>
                      </c:forEach>
                    </select>
                  </div>
                </div>
                <div class="form-group col-md-5">
                  <label class="col-md-4 control-label">原保管人</label>
                  <div class="col-md-8">
                    <input type="hidden" name="yuanRen" value="${detailMap.detail.yuanRen}">
                    <input type="text" name="yuanRenName" class="form-control" readonly
                           value="${detailMap.keeper.empName}">
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group col-md-5">
                  <label class="col-md-4 control-label">原存放地</label>
                  <div class="col-md-8">
                    <input type="hidden" name="formPlace" value="${detailMap.detail.formPlace}">
                    <input type="text" name="formPlaceName" class="form-control" readonly
                           value="${detailMap.storage.name}">
                  </div>
                </div>
                <div class="form-group col-md-5">
                  <label class="col-md-4 control-label">移动目的地</label>
                  <div class="col-md-8">
                    <select name="targetPlace" class="form-control">
                      <option value="">--请选择--</option>
                      <c:forEach items="${jcBasicdatavalues2}" var="jcs2">
                        <option value="${jcs2.oid}" ${detailMap.detail.targetPlace eq jcs2.oid ? 'selected' : ''}>${jcs2.name}</option>
                      </c:forEach>
                    </select>
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group col-md-5">
                  <label class="col-md-4 control-label">备注</label>
                  <div class="col-md-8">
                    <textarea class="form-control" name="remarks" rows="5"
                              placeholder="请输入备注">${detailMap.detail.remark}</textarea>
                  </div>
                </div>
                <div class="form-group col-md-5">
                  <label class="col-md-4 control-label">移动时间</label>
                  <div class="col-md-8">
                    <input type="date" name="moveDate" class="form-control"
                           value="${detailMap.detail.moveDate}">
                  </div>
                </div>
                <div class="form-group col-md-2">
                  <input type="button" onclick="deteleDetails(this)" class="btn btn-danger" value="删除此明细">
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group col-md-12">
                  <hr>
                </div>
              </div>
            </div>
          </c:forEach>
        </c:if>
      </div>

      <div class="col-md-12">
        <div class="form-group col-md-12">
          <div class="col-md-10  col-md-offset-2">
            <a type="button" href="javascript:history.back()" class="btn btn-info">返回</a>
            <button type="button" id="addDetails" class="btn btn-success">添加移动明细</button>
            <button type="button" id="editapplybtn" class="btn btn-success">提交信息</button>
            <button type="reset" id="resetbtn" class="btn btn-default">取消操作</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- 移动明细模板 -->
<div id="detailsdemo" style="display: none;">
  <div>
    <div class="col-md-12">
      <div class="form-group col-md-5">
        <label for="assetName" class="col-md-4 control-label">选择资产</label>
        <div class="col-md-8">
          <select name="assetId" class="form-control" id="assetId" onchange="selectAsset(this)">
            <option value="">--请选择--</option>
            <c:forEach items="${zcAssets}" var="zs">
              <option value="${zs.oid}">${zs.assetName}</option>
            </c:forEach>

          </select>
        </div>
      </div>
      <div class="form-group col-md-5">
        <label for="yuanRen" class="col-md-4 control-label">原保管人</label>
        <div class="col-md-8">
          <input type="hidden" id="yuanRen" name="yuanRen">
          <input type="text" name="yuanRenName" class="form-control" readonly="readonly">
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group col-md-5">
        <label for="formPlace" class="col-md-4 control-label">原存放地</label>
        <div class="col-md-8">
          <input type="hidden" id="formPlace" name="formPlace">
          <input type="text" name="formPlaceName" class="form-control" readonly="readonly">
        </div>
      </div>
      <div class="form-group col-md-5">
        <label for="targetPlace" class="col-md-4 control-label">移动目的地</label>
        <div class="col-md-8">
          <select id="targetPlace" name="targetPlace" class="form-control" id="flowid1">
            <option value="">--请选择--</option>
            <c:forEach items="${jcBasicdatavalues2}" var="jcs2">
              <option value="${jcs2.oid}">${jcs2.name}</option>
            </c:forEach>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group col-md-5">
        <label for="remark" class="col-md-4 control-label">备注</label>
        <div class="col-md-8">
						<textarea class="form-control" id="remarks" name="remarks" rows="5"
                                  placeholder="请输入备注"></textarea>
        </div>
      </div>
      <div class="form-group col-md-5">
        <label for="moveDate" class="col-md-4 control-label">移动时间</label>
        <div class="col-md-8">
          <input type="date" id="moveDate" name="moveDate" class="form-control">
        </div>
      </div>
      <div class="form-group col-md-2">
        <input type="button" onclick="deteleDetails(this)" class="btn btn-danger" value="删除此明细">
      </div>
    </div>

    <div class="col-md-12">
      <div class="form-group col-md-12">
        <hr>
      </div>
    </div>
  </div>
</div>



<div class="modal fade" id="selectempModal" tabindex="-1" role="dialog" aria-labelledby="selectempModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="selectempModalLabel">选择员工</h4>
      </div>
      <div class="modal-body">
        <form action="" class="form-horizontal" role="form">
          <div class="form-group">
            <label for="dept" class="col-md-4 control-label">所属部门</label>
            <div class="col-md-5">
              <select name="dept" class="form-control" id="dept">
                <option value="">--请选择--</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="job" class="col-md-4 control-label">所属职位</label>
            <div class="col-md-5">
              <select name="job" class="form-control" id="job">
                <option value="">--请选择--</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="emp" class="col-md-4 control-label">员工信息</label>
            <div class="col-md-5">
              <select name="emp" class="form-control" id="emp" size="10">
              </select>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" id="sub" class="btn btn-primary">确认选择</button>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function(){
    $.getJSON("${pageContext.request.contextPath}/bx-informal/listDeptUseSelect",function(listdept){
      var dept = $("#dept")[0];
      dept.options.length=1;
      for(var i=0;i<listdept.length;i++){
        var d = listdept[i];
        dept.options.add(new Option(d.deptName,d.oid));
      }
    });

    $("#dept").change(function(){
      $("#job")[0].options.length=1;
      $("#emp")[0].options.length=0;
      if(this.value==""){
        return;
      }
      $.getJSON("${pageContext.request.contextPath}/bx-informal/listDeptJobUseSelect",{deptid:this.value},function(listjob){
        var job = $("#job")[0];
        job.options.length=1;
        for(var i=0;i<listjob.length;i++){
          var job1 = listjob[i];
          job.options.add(new Option(job1.name,job1.oid));
        }
      });

      $.getJSON("${pageContext.request.contextPath}/bx-informal/listEmpUseSelete",{deptid:$("#dept").val()},function(emps){
        var emp = $("#emp")[0];
        emp.options.length=0;
        for(var i=0;i<emps.length;i++){
          var e = emps[i];
          emp.options.add(new Option(e.empName,e.oid));
        }
      });
    });

    $("#job").change(function(){
      $.getJSON("${pageContext.request.contextPath}/bx-informal/listEmpUseSelete2",{deptid:$("#dept").val(),jobid:this.value},function(emps){
        var emp = $("#emp")[0];
        emp.options.length=0;
        for(var i=0;i<emps.length;i++){
          var e = emps[i];
          emp.options.add(new Option(e.empName,e.oid));
        }
      });
    });

    $("#sub").click(function(){
      var eid=$("#emp").val();
      if(eid!=null){
        var empName=$("#emp option:selected").text();
        setempvalue(eid,empName);
        $('#selectempModal').modal('hide');
      }else{
        alert("请选择员工");
      }

    });

    $('#selectempModal').on('show.bs.modal',function() {
      $("#dept").val("");
      $("#job")[0].options.length=1;
      $("#emp")[0].options.length=0;
    });
  });
</script>






<script type="text/javascript">
  $(document).ajaxError(function(event,xhr) {
    if(xhr.status=="403"){//没有权限
      document.location.href = xhr.getResponseHeader("url");
    }else if(xhr.status!="200"){
      //alert("服务器错误!");
      console.log("服务器错误!");
    }
  });
</script>

<!-- 模态框（Modal） -->
<div class="modal fade" id="alertMsgModal" tabindex="-1" role="dialog" aria-labelledby="alertMsgModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xs">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h4 class="modal-title" id="alertMsgModalLabel">
          提示
        </h4>
      </div>
      <div class="modal-body" id="alertmsg">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  function setempvalue(eid, empName) {
    $("#proposer").val(eid);
    $("#empName").val(empName);
  }
</script>
</body>



<script type="text/javascript">
  function deteleDetails(o){
    $(o).parent().parent().parent().remove();
    if($("#details").children().length==1){
      $("#detailsTitle").hide();
    }
  }

  function selectAsset(o, isInit) {
    var div = $(o).parent().parent().parent().parent();

    // 如果是初始化且值为空，则不处理
    if (isInit && $(o).val() === "") return;

    if ($(o).val() != "") {
      $.getJSON(
              "${pageContext.request.contextPath}/zc-assetmoveapply/findZcAssetSimpleInfo",
              {oid: $(o).val()},
              function(asset) {
                // 填充原保管人和原存放地信息
                div.find("input[name='yuanRenName']").val(asset.keeperEmp.empName);
                div.find("input[name='yuanRen']").val(asset.keeper);
                div.find("input[name='formPlaceName']").val(asset.storage.name);
                div.find("input[name='formPlace']").val(asset.depositary);

                // 处理移动目的地下拉框
                var targetPlaceSelect = div.find("select[name='targetPlace']");
                var currentSelected = targetPlaceSelect.val();

                // 清空并重新填充选项
                targetPlaceSelect.empty();
                targetPlaceSelect.append('<option value="">--请选择--</option>');

                // 动态过滤选项（使用JSTL变量）
                <c:forEach items="${jcBasicdatavalues2}" var="jcs2">
                if("${jcs2.oid}" != asset.depositary) {
                  var selected = (currentSelected == "${jcs2.oid}") ? 'selected' : '';
                  targetPlaceSelect.append('<option value="${jcs2.oid}" '+selected+'>${jcs2.name}</option>');
                }
                </c:forEach>
              }
      );
    }
  }

  $(document).ready(function() {
    // 遍历所有已选择的资产下拉框
    $("select[name='assetId']").each(function() {
      if ($(this).val() != "") {
        // 使用setTimeout确保DOM完全加载
        setTimeout(function() {
          selectAsset(this, true); // true表示是初始化触发
        }.bind(this), 100);
      }
    });

    $("#addDetails").click(function(){
      $("#detailsTitle").show();
      $("#details").append($("#detailsdemo").html());
      $('#myform').bootstrapValidator('addField', 'assetId', {
        validators: {
          notEmpty : {/*非空提示*/
            message : '请选择要移动的资产!'
          }

        }
      });
      $('#myform').bootstrapValidator('addField', 'moveDate', {
        validators: {
          notEmpty : {/*非空提示*/
            message : '移动时间不能为空!'
          }

        }
      });
      $('#myform').bootstrapValidator('addField', 'targetPlace', {
        validators: {
          notEmpty : {/*非空提示*/
            message : '请选择移动目的地!'
          }
        }
      });
    });

    $("#myform").bootstrapValidator({
      message : 'This value is not valid',
      feedbackIcons : {/*input状态样式图片*/
        valid : 'glyphicon glyphicon-ok',
        invalid : 'glyphicon glyphicon-remove',
        validating : 'glyphicon glyphicon-refresh'
      },
      fields : {
        flowid : {
          validators : {
            notEmpty : {/*非空提示*/
              message : '请选择移动流程!'
            }
          }
        },
        reason : {
          validators: {
            notEmpty : {/*非空提示*/
              message : '采购事由不能为空!'
            }
          }
        }
      },
      submitHandler : function(validator,form, submitButton) {
        validator.defaultSubmit();
      }
    });


    $("#resetbtn").click(function() {
      $("#myform").data("bootstrapValidator").resetForm();
    });

    $("#editapplybtn").click(function() {
      $('#myform').data("bootstrapValidator").validate();
      if($('#myform').data("bootstrapValidator").isValid()){
        var typeids = new Array();
        var s=true;
        $("select[name='assetId']").each(function(){
          if($.inArray($(this).val(), typeids)!=-1){
            $("#alertmsg").text("多条移动明细中不能是同一资产!");
            $('#alertMsgModal').modal('show');
            s=false;
            return;
          }
          typeids.push($(this).val());
        });
        if(s==true){
          $('#myform')[0].submit();
        }
      }
    });

  });


</script>
</html>
